<template>
	<view :style="{
      background: itemData.style.bgcolor,
      padding:
        itemData.style.paddingTop +
        'px ' +
        itemData.style.paddingLeft +
        'px ' +
        itemData.style.paddingBottom +
        'px ' +
        itemData.style.paddingLeft +
        'px',
    }">
		<view class="drag optional">
			<view class="bg-box">

				<view class="d-s-c" style="
            z-index: 1;
            position: relative;
            margin-left: 20rpx;
            margin-top: 80rpx;
          ">
					<image lazy-load class="item-image"
						:src="userInfo.detail && userInfo.detail.avatarUrl || '/static/login-default.png'"
						mode="aspectFill" @click="gotoPage('/pages/user/set/set')"></image>
					<view class="d-c d-b-s white ww100" style="height: 102rpx;">
						<view class="d-b-c ww100">
							<template v-if="userInfo.detail">
								<view class="flex-1 d-s-c">
									<text class="fb f32">{{ userInfo.detail.nickName }}</text>
									<text class="ml20 grade" @click="gotoPage('/pages/card/index')"
										v-if="userInfo.userGrade">{{ userInfo.userGrade }}</text>
								</view>
							</template>
							<text class="fb f32 mt20" v-else @click="doLogin()">点击登录</text>
							<view class="news d-e-c">
								<!-- #ifdef H5 -->
								<text v-if="itemData.isCheck&& isWeixin()" class="icon iconfont icon-saoyisao1"
									@click="scanQrcode"></text>
								<!-- #endif -->
								<!-- #ifndef H5 -->
								<text v-if="itemData.isCheck" class="icon iconfont icon-saoyisao1"
									@click="scanQrcode"></text>
								<!-- #endif -->
								<view class="pr">
									<view class="news_num" v-if="userInfo.msgCount > 0">
									</view>
									<text class="icon iconfont icon-kefu1 mr20"
										@click="gotoPage('/pagesPlus/chat/chat_list')"></text>
								</view>

							</view>
						</view>
						<view v-if="userInfo.detail">ID:{{ userInfo.detail.userId }}</view>
					</view>
				</view>
				<view class="bg-base" :class="'bg-base-' + itemData.style.type"></view>
				<view class="diy-Base" :style="{ background: itemData.style.background }">
					<view class="list column-3">
						<view class="item" @click="gotoPage('/pages/user/my-wallet/my-wallet')">
							<view class="item-text fb f32" v-if="userInfo.detail">{{ userInfo.detail.balance }}</view>
							<view class="item-text fb f32" v-if="!isLogin">{{ 0 }}</view>
							<view class="item-text text-ellipsis">账户余额</view>
						</view>
						<view class="item item-center" :style="'padding:0 ' + itemData.style.padding * 2 + 'rpx;'"
							@click="gotoPage('/pages/user/points/points')">
							<view class="item-text fb f32">{{ userInfo.detail&&userInfo.detail.points }}</view>
							<view class="item-text fb f32" v-if="!isLogin">{{ 0 }}</view>
							<view class="item-text text-ellipsis">{{ userInfo.setting && userInfo.setting.pointsName}}
							</view>
						</view>
						<view class="item" @click="gotoPage('/pages/user/my-coupon/my-coupon')">
							<view class="item-text fb f32">{{ userInfo.coupon||'0' }}</view>
							<view class="item-text text-ellipsis">优惠券</view>
						</view>
					</view>
				</view>
			</view>
			<slot />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: ["itemData", "userInfo", 'isLogin'],
		created() {},
		methods: {
			getDetail() {
				let self = this;
				self._get("user/index/setting", {}, (res) => {});
			},
			/*跳转页面*/
			gotoDetail(e) {
				this.gotoPage(e.linkUrl);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.grade {
		display: block;
		padding: 0 16rpx;
		font-size: 22rpx;
		/* height: 36rpx; */
		line-height: 36rpx;
		border-radius: 40rpx;
		background-color: rgba($color: #000000, $alpha: 0.1);
		color: #ffffff;
	}

	.diy-Base {
		position: absolute;
		width: 710rpx;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
	}

	.diy-Base .list {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.diy-Base .list .item {
		padding: 20rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.diy-Base .list.column-3 .item {
		// width: 33.333333333%;
		width: 20%;
	}

	.diy-Base .list.column-4 .item {
		width: 25%;
	}

	.diy-Base .list.column-5 .item {
		width: 20%;
	}

	.diy-Base .list .item-text {
		width: 100%;
		padding: 8rpx 0;
		text-align: center;
	}

	.bg-box {
		overflow: hidden;
		height: 370rpx;
		position: relative;

		.news {

			.chat {
				width: 40rpx;
				height: 40rpx;
			}

			.icon {
				font-size: 40rpx;
				color: #fff;
				margin-left: 20rpx;
			}
		}

		.news_num {
			position: absolute;
			top: 0rpx;
			right: 8rpx;
			z-index: 100;
			border-radius: 50%;
			width: 16rpx;
			height: 16rpx;
			text-align: center;
			background: #F42A16;
		}
	}

	.bg-base {
		// width: 160%;
		height: 330rpx;
		position: absolute;
		right: 0;
		left: 0;
		top: 0;
		margin: auto;
		// border-radius: 50% 50% 50% 50%;
	}

	.bg-base-1 {
		background-color: #ff5704;
	}

	.bg-base-2 {
		background-color: #19ad57;
	}

	.bg-base-3 {
		background-color: #ffcc00;
	}

	.bg-base-4 {
		background-color: #33a7ff;
	}

	.bg-base-5 {
		background-color: #e4e4e4;
	}

	.bg-base-6 {
		background-color: #c8ba97;
	}

	.bg-base-7 {
		background-color: #623ceb;
	}

	.item-image {
		width: 102rpx;
		height: 102rpx;
		border-radius: 50%;
		background-color: #fff;
		overflow: hidden;
		margin-right: 20rpx;
		display: block;
		flex-shrink: 0;
	}

	.d-c-s {
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}
</style>